<template>
    <div class="main">
         <div class="table">
              <div class="chhead">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/managemain' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>课程管理</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="input">
                    <el-input
                    v-model="search"  @click="handleEdit(scope.$index, scope.row)"
                    size="mini"
                    prefix-icon="el-icon-search"
                    placeholder="输入关键字搜索" class="input" />
                </div>
              </div>
              <el-table
            :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column
                  label="课程ID"
                  prop="id">
            </el-table-column>
            <el-table-column
                  label="课程名称"
                  prop="name">
            </el-table-column>
            <el-table-column
                  label="课程学时"
                  prop="time">
            </el-table-column>
            <el-table-column
              align="right">
              <template slot="header">
                  <el-tag type="success">上机课程管理功能模块选择区域</el-tag>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="dialogFormVisible2 = true" type="primary" plain>编辑</el-button>
                <el-button size="mini" @click="dialogFormVisible = true" type="primary" plain>增加</el-button>
                <el-button size="mini" type="danger" plain @click="handleDelete(scope.$index, scope.row)">移除</el-button>
                <el-dialog title="课程增加" :visible.sync="dialogFormVisible">
                  <el-form :model="addform">
                    <el-form-item label="课程名称" :label-width="formLabelWidth">
                      <el-input v-model="addform.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程学时" :label-width="formLabelWidth">
                      <el-input v-model="addform.time" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addSubmitForm">确 定</el-button>
                  </div>
                </el-dialog>
                <el-dialog title="课程编辑" :visible.sync="dialogFormVisible2">
                  <el-form :model="changaddform">
                    <el-form-item label="课程ID" :label-width="formLabelWidth">
                      <el-input v-model="addform.changid" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程名称" :label-width="formLabelWidth">
                      <el-input v-model="addform.changname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程学时" :label-width="formLabelWidth">
                      <el-input v-model="addform.changtime" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="changSubmitForm">确 定</el-button>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
         </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      isshow: '1',
      addform: {
        name: '',
        time: ''
      },
      changaddform: {
        changid: '',
        changname: '',
        changtime: ''
      },
      search: '',
      searchid: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      formLabelWidth: '120px'
    }
  },
  async created () {
    const res = await this.$http.get('/course/selectAll')
    this.tableData = res.data.datas.course
    console.log(res.data.datas.course)
  },
  methods: {
    async handleDelete (index, row) {
      this.searchid = row.id
      await this.$http.post(
        '/course/deleteById',
        { id: this.searchid },
        { 'Content-Type': 'application/json' }
      ).then(res => {
        console.log(res)
        this.$message.success('课程移除成功')
      })
    },
    async addSubmitForm () {
      console.log(this.addform)
      await this.$http.post(
        '/course/addCourse',
        { 'Content-Type': 'multipart/form-data' },
        this.addform
      ).then(res => {
        console.log(res)
        this.$message.success('课程增加成功')
        this.tableData.push(this.addform)
      })
      this.dialogFormVisible = false
    },
    async changSubmitForm () {
      console.log(this.addform)
      await this.$http.post(
        '/course/updateCourse',
        { 'Content-Type': 'multipart/form-data' },
        this.changform
      ).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message.success('课程更改成功')
        }
      })
      this.dialogFormVisible2 = false
    }
  }
}
</script>
<style>
.input{
  width: 12%;
  position: relative;
  float: right;
  right: 5px;
}
</style>
<style lang="less" scoped>

</style>
